<template>
    <!--  用户中心界面，分发到两个系统中 -->
    <div>
        <div class="top">
            <div class="top-title1">
                USER CENTER
            </div>
            <div class="top-title2">

            </div>
        </div>
        <div class="center">
            <div class="main-left">
                <div class="left-avatar">
                    <div>
                        <img src="@/assets/icon/4.png"/>
                        <div style="position:absolute;left: 12px;top: 12px;">
                            <img src="@/assets/icon/3.png"/>
                        </div>
                    </div>
                </div>

                <div v-if="login===false"
                     style="font-size:24px;position:absolute;left: 195px;top: 200px;display: flex;align-content: center;align-items: center;justify-items: center;flex-direction: column">
                    <div style="font-size: 28px">
                        Please login！
                    </div>

                </div>
                <div
                    v-if="login===true"
                    style="font-size:24px;position:absolute;left: 145px;top: 140px;display: flex;align-content: center;align-items: center;justify-items: center;flex-direction: column">
                    <div style="font-size: 28px">
                        {{ currentUser.userRealname }}
                    </div>
                    <div style="margin-top: 10px">
                        #{{ currentUser.id }}
                    </div>
                    <div style="margin-top: 10px">
                        {{ currentUser.roles[0] }}
                    </div>
                    <div style="margin-top: 10px">
                        {{ currentUser.userDeptId }}
                    </div>
                </div>
                <div
                    style="position:absolute;top: 375px;width: 519px;height: 117px;background-color:#E8F3FF;border-radius: 0px 0px 30px 30px; ">
                    <div
                        class="account-set-bt"
                        style="position:absolute;left: 104px;top: 23px;width: 313px;height: 70px;border-radius: 30px;color: rgba(255, 255, 255, 100);">
                        <div style="position:absolute;left: 49px;top: 12px">

                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="47" height="47"
                                 style="fill: rgba(255, 255, 255, 1);border-color: rgba(0,0,0,0);border-width: bpx;border-style: undefined"
                                 filter="none">
                                <path
                                    d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2a7.2 7.2 0 0 1-6-3.22c.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08a7.2 7.2 0 0 1-6 3.22z"/>
                            </svg>
                        </div>
                        <div v-if="login===true" style="position: absolute;left: 120px;top:22px;font-size: 24px;">
                            ACCOUNT
                        </div>
                        <div @click="$router.push('/pass')" v-if="login===false"
                             style="position: absolute;left: 110px;top:18px;font-size: 24px;">
                            Authentication
                        </div>
                    </div>
                </div>
            </div>
            <div class="main-right">
                <div style="position:absolute;">

                    <Calender/>

                </div>
                <div class="sy-entry1">
                    <div class="sy-title">
                        Chance System
                    </div>
                    <div class="sy-image">
                        <img src="@/assets/icon/5.png"/>
                    </div>
                    <div class="sy-button1" @click="$router.push('/npms')">
                        <div style="margin-top: 15px">
                            Enter
                        </div>

                    </div>


                </div>
                <div class="sy-entry2">
                    <div class="sy-title">
                        Pre-Sale System
                    </div>
                    <div class="sy-image">
                        <img src="@/assets/icon/6.png"/>
                    </div>
                    <div class="sy-button2" @click="$router.push('/npms')">

                        <div style="margin-top: 15px">
                            Enter
                        </div>
                    </div>


                </div>


            </div>
        </div>
        <div class="bottom">
            <div class="bottom-title">
                @CopyRight NeuSoft Team-8 2021.7
            </div>

        </div>


    </div>
</template>

<script>
import Calender from "@/components/Calender/Calender";
import {Message} from "element-ui";

export default {
    name: "Main",
    // eslint-disable-next-line vue/no-unused-components
    components: {Calender},
    data() {
        return {
            login: this.$store.getters.getLogin,
            currentUser: this.$store.getters.getUser
        }
    },
    methods: {
        test() {

        }
    },
    mounted() {
        this.test()
        console.log(this.$store.getters.getUser)
    }

}
</script>

<style scoped>
.top {
    min-width: 1910px;

    width: 100%;
    height: 125px;
    background-color: white;
    display: flex;


}

.top-title1 {
    margin-left: 350px;
    padding-top: 35px;

    height: 54px;
    color: rgba(58, 98, 215, 100);
    font-size: 36px;
    text-align: left;
    font-family: SourceHanSansSC-regular;
}

.top-title2 {
    left: 520px;
    padding-top: 52px;
    width: 500px;
    height: 30px;
    color: rgba(58, 98, 215, 100);
    font-size: 20px;
    text-align: left;
    font-family: SourceHanSansSC-regular;
}

.center {
    min-width: 1910px;
    width: 100%;
    min-height: 774px;

}

.bottom {
    min-width: 1910px;
    position: absolute;
    width: 100%;
    height: 85px;
    bottom: 0;
    background-color: white;

}

.bottom-title {
    width: 100%;
    text-align: center;
    padding-top: 30px;

    height: 20px;
    color: rgba(170, 170, 170, 100);
    font-size: 14px;
    font-family: SourceHanSansSC-regular;
}

.main-left {
    position: absolute;
    height: 492px;
    width: 519px;
    background-color: white;
    border-radius: 30px;
    left: 288px;
    top: 273px;
    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2);


}

.left-avatar {
    position: absolute;
    top: -67px;
    left: 175px;
}

.main-right {
    position: absolute;
    left: 910px;
    top: 215px;
}

.sy-entry1 {
    position: absolute;
    width: 366px;
    height: 389px;
    background-color: white;
    border-radius: 30px;
    top: 161px;
    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2);
}

.sy-entry2 {
    position: absolute;
    width: 366px;
    height: 389px;
    left: 405px;
    background-color: white;
    border-radius: 30px;
    top: 161px;
    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2);
}

.sy-title {
    position: absolute;
    font-size: 36px;
    left: 55px;
    top: 27px;
}

.sy-image {
    position: absolute;
    left: 126px;
    top: 124px;
}

.sy-button1 {
    position: absolute;
    left: 27px;
    top: 295px;
    width: 313px;
    height: 70px;
    border-radius: 30px 30px 30px 30px;
    background-color: #00bfa6;
    color: rgba(255, 255, 255, 100);
    font-size: 28px;
    text-align: center;
    font-family: Microsoft Yahei;
    cursor: pointer;
    transition: all 200ms;
}

.sy-button1:hover {
    background-color: #32a193;
}

.sy-button1:active {
    background-color: #56bdb0;
}

.sy-button2 {
    position: absolute;
    left: 27px;
    top: 295px;
    width: 313px;
    height: 70px;
    border-radius: 30px 30px 30px 30px;
    background-color: #298df8;
    color: rgba(255, 255, 255, 100);
    font-size: 28px;
    text-align: center;
    font-family: Microsoft Yahei;
    transition: all 200ms;
    cursor: pointer;

}

.sy-button2:hover {
    background-color: #2065af;
}

.sy-button2:active {
    background-color: #3d76b3;
}

.account-set-bt {
    cursor: pointer;
    background-color: #0955a5;
    transition: all 300ms;

}

.account-set-bt:hover {
    background-color: #3675b4;
}

.account-set-bt:active {
    background-color: #578cc1;
}

</style>